import React from 'react';
import { connect } from 'react-redux';
import { RouteComponentProps } from 'react-router';
import {
	Divider,
	Button,
	message,
	Tooltip
} from 'antd';
import styles from './index.module.scss';
import {
	SaveOutlined,
	ApartmentOutlined,
	CloudDownloadOutlined,
	PartitionOutlined,
	PlusCircleOutlined,
} from '@ant-design/icons';
import { FormInstance } from 'antd/lib/form';
import DataPreview from './components/DataPreview';
import AddSourceModal from './components/AddSourceModal';
import AddDataModal from './components/AddDataModal';
import GraphinComponent from './components/GraphinComponent';
import AssociationModal from './components/AssociationModal';
import DataOutModal from './components/DataOutModal';
import BdhButton from 'src/pages/Components/BdhButton';
import {
	componentJoin,
	// componetDisconnect,
	nodeHandle,
	removeNode,
	getModelInfo,
	createModel,
	updateContent,
	realTimeView,
	rJob,
	triggerModel,
} from 'src/services/DataManage';
import SaveModelModal from './components/SaveModelModal';
import FeildSplit from 'src/pages/DataManage/DataArrange/components/FeildSplit';
import Aggregation from 'src/pages/DataManage/DataArrange/components/Aggregation';
import FeildRemove from 'src/pages/DataManage/DataArrange/components/FeildRemove';
import { Prompt } from 'react-router-dom';
import EmptyField from './components/EmptyField';
import CombinedFields from './components/CombinedFields';
import RenameFields from './components/RenameFields';
import GroupField from 'src/pages/DataManage/DataArrange/components/GroupField/index';
import CaseConversion from './components/CaseConversion';
import ClearEmpty from 'src/pages/DataManage/DataArrange/components/ClearEmpty';
import ReplaceFields from 'src/pages/DataManage/DataArrange/components/ReplaceFields';
import ComputedField from 'src/pages/DataManage/DataArrange/components/ComputedField';
import { toolsData } from 'src/pages/DataManage/DataArrange/data';
import RenameComponent from 'src/pages/DataManage/DataArrange/components/RenameComponent';





class DataArrage extends React.Component<RouteComponentProps & { btnAuth:any }> {

	state = {
		sourceModalVisible: false,
		visible: false,
		downloadVisible: false,
		modalTitle: null ,
		dataVisible: false,

		relationVisible: false,
		dataOutVisible: false,
		saveModalVisible: false,
		fieldSpiltVisible: false,
		fieldRemoveVisible: false,
		fieldEmptyVisible: false,
		fieldCombinVisible: false,
		fieldRenameVisible: false,
		fieldGroupVisible: false,
		fieldCaseVisible: false,
		fieldClearVisible: false,
		fieldReplaceVisible: false,
		aggVisible: false,
		fieldComputedVisible: false,
		renameComponentVisible: false,

		opt: true, //默认为true事为创建 为false时为更新
		showLeave: false,

		//模型状态，默认是停止的，
		modelStatus: 'STOPPED',


		count: 1000,
		addETL: false,
		etlData: {
			id: '',
			parentCode: '',
			code: ''
		},
		//组件数据
		data: {
			nodes: [],
			edges: []
		},

		//预览数据传参
		previewData: { },
		//输出组件数据
		outComponentData: {  model: { fieldMappings: [] },
			id: '' },
		tools: {
			//输出toolts
			outTools: false,
			//关联组件
			relationTools: false,
			//整理组件
			orderTools: false,

			aggregationTools: false,
		},
		pin: false,
		curNodeData: { },
		//同步中的节点
		syncNodes: [],
		//需更新的节点
		updateNodes: [],
		//保存中
		saving: false,
		//选中的id
		hoverActive: null,
	};

	formRef = React.createRef<FormInstance>()

	graphRef = React.createRef<any>();

	syncTimer = null

	handleModelVisible = ( name,isShow ) => {
		let tmp = {};
		tmp[name] = isShow;
		this.setState( tmp );

	}

	//添加数据
	showModal = ( text: any ) => {
		//判断是否新建etl流
		if ( this.state.addETL ) {
			this.setState( {
				visible: true,
				modalTitle:	text,
				curNodeData: null,
			} );
		}else {
			//当没有新建elt流时弹出新建etl流弹框
			this.setState( {
				sourceModalVisible: true
			} );
		}
	};

	//数据预览相关函数
	showDrawer = ( type, data ) => {
		if ( type === 'show' ) {
			this.setState( {
				previewData: data
			},() => {this.setState( { dataVisible: true, } );} );
		} else {
			if ( !this.state.pin ) {
				this.setState( { dataVisible: false, } );
			}
		}
	};

	//设置eltdata
	setEtlData = data => {
		this.setState( { etlData: data } );
	}

	//设置输出outComponentData
	setOutData = data => {
		let d = JSON.parse( JSON.stringify( data ) );
		this.setState( { outComponentData: d } );
	}


	//**********************
	//grapht数据操作
	//*********************

	//更新数据
	changeGraphinData = ( tmp:any, notSave?:any ) => {
		this.setState(
			{
				data: tmp
			},
			() => {
				if ( notSave ) return;
				//当为更新时保存数据有更改且离开不保存，显示提示语并保存数据
				this.handleUpdateGraphinContent();
			}
		);

	}

	updateComponentInfo = nodeData => {
		delete nodeData.type;
		let nodes = [ ...this.state.data.nodes ];
		nodes = nodes.map( item => {
			if( item.id === nodeData.id ) {
				item.label = nodeData.name;
				item.data = { ...item.data,...nodeData };
				const { graph } = this.graphRef.current;
				graph.updateItem( item.id,{ label: nodeData.name,
					name: nodeData.name,
					data: { name: nodeData.name } } );
			}
			return item;
		} );
		let tmp = { nodes: [ ...nodes ], edges: [ ...this.state.data.edges ] };
		this.changeGraphinData(  tmp );
	}



	//添加/修改node节点
	addNode =  async ( data:any, isUpdate?:boolean )  => {
		const handleData = await nodeHandle( { data: { 'componentId': data.id,'modelId': data.modelId } } );
		let dataStyle = data.style? data.style:{ 'primaryColor': 'rgba( 103, 194, 58, 1 )' };
		dataStyle.fontColor = '#000000';
		if ( handleData.data && handleData.data.success ) {
			let x = data.x;
			let y = data.y;
			let node = {
				id: data.id,
				label: data.name,
				data: {
					...data,
					...handleData.data.data,
					type: data.nodeShapeTpye?data.nodeShapeTpye:'database'
				},
				style: dataStyle,
				shape: data.shape?data.shape:'RectNode',
				'x': x?x+140:Math.random()*500,
				'y': y?y:Math.random()*500,
			};
			if( data.edit ) {
				node.x = x;
			}
			node.data['tableName'] = node.data.tableName ? node.data.tableName:node.data.name;
			this.addNodeData( data,node,isUpdate );
			//	数据节点的其他操作
			return true;
		} else {
			// message.error( handleData.message );
			return false;
		}
	}

	//数据上修改
	addNodeData = ( data,node,isUpdate ) => {
		let nodes = [ ...this.state.data.nodes ];
		let syncNodes = [ ...this.state.syncNodes ];
		let edges = this.state.data.edges;
		if ( isUpdate ) { //修改时
			if( !data.edit ) {
				// 替换边线中的id
				nodes = nodes.filter( o => o.id !== data.oldId );
				syncNodes = syncNodes.filter( o => o.id !== data.oldId );
				let reg = new RegExp( data.oldId, 'g' );
				edges = JSON.parse( JSON.stringify( edges ).replace( reg, data.id ) );
				delete node.data.oldId;
			}else {
				// 替换边线中的id
				nodes = nodes.filter( o => o.id !== data.id );
				syncNodes = syncNodes.filter( o => o.id !== data.id );
				delete node.data.edit;
			}
		}
		let tmp = { nodes: [ ...nodes, node ], edges };
		// 添加到同步列表
		if ( data.effect === 'DISABLE' ) {
			node.style.primaryColor = '#eee';
			this.setState( {
				syncNodes: [ ...syncNodes, node ]
			}, () => {
				this.setSyncFun();
			} );
		}
		this.changeGraphinData( tmp );
	}

	//删除一个节点并删除关联关系
	delNodeAll = async data => {
		const { code , id } = data;
		const info = await removeNode( { data: code } );
		if ( info.data.success ) {
			//组件关联操作的组件
			// if( data.nodeType ) {
			// 	const cinfo = await componetDisconnect( { data: code } );
			// 	if ( cinfo.data.success ) {
			// 		//图形上删除节点及关系
			// 		this.delNode( id );
			// 		message.success( '节点删除成功' );
			// 	}else {
			// 		message.error( '删除失败请重试' );
			// 	}
			// }else {
			//图形上删除节点及关系
			this.delNode( id );
			message.success( '节点删除成功' );
			// }
		}
	};

	//引入组件
	joinComponent = async ( fromData,toData,options ) => {
		//节点新增
		if( !toData.edit ) {
			let nData = { 'fromComponentCode': fromData.code, 'modelId': fromData.modelId, 'position': 1, 'toComponentCode': toData.code };
			//节点和输出节点连接
			const resd = await componentJoin( { data: nData } );
			if ( resd.data.success ) {
				//图形上添加节点
				const t = await this.addNode( { ...toData,modelId: fromData.modelId,x: fromData.x,y: fromData.y } );
				if( t ) {
					//左节点与关联node连线
					this.addNodeRelation( { source: fromData.id ,result: toData.id } );
					if( options.visible ) {
						//关闭modal
						this.handleModelVisible( options.visible, false );
					}
				}else {
					//处理组件不成功时要删除节点和接触连接
					this.delNodeAll( toData );
					message.error( '操作失败，请重试' );
				}
			}else {
				// 组件关联不成功只需要删除节点就可以了
				this.delNodeAll( { ...toData,nodeType: '' } );
				message.error( '操作失败，请重试' );
			}
		}else {
			//节点更新
			await this.addNode( { ...toData,modelId: fromData.modelId,x: fromData.x,y: fromData.y },true );
		}

	}

	handleToolsState = d => {
		let data = {
			//输出toolts
			outTools: false,
			//关联组件
			relationTools: false,
			orderTools: false,
			aggregationTools: false
		};
		if( d.ttype ) {
			data[d.ttype] = true;
		}
		this.setState(
			{ tools: data }
		);
	}

	handleRouterTo = p => {
		this.props.history.push( p );
	}

	//添加节点关系连线
	addNodeRelation = data => {
		let nline = { source: data.source, target: data.result,
			data: { source: data.source, target: data.result } };
		let tmp = { nodes: this.state.data.nodes,
			edges: [ ...this.state.data.edges,nline ] };
		this.changeGraphinData( tmp );
	}

	//删除节点
	delNode = id => {
		this.changeGraphinData( {
			//删除node节点
			nodes: this.state.data.nodes.filter( item => !( item.id === id ) ),
			//删除连线关系无论是源或者目标
			edges: this.state.data.edges.filter( item => !( item.source === id || item.target === id ) )
		} );

		// 删除待同步节点
		this.setState( {
			syncNodes: this.state.syncNodes.filter( item => !( item.id === id ) ),
		}, () => {
			this.setSyncFun();
		} );
	}

	//更新节点位置信息
	updatePosition = ( id, x, y ) => {
		this.state.data.nodes.map( item => {
			if( item.id === id ) {
				item['x'] = x;
				item['y'] = y;
			}
			return item;
		} );
		let tmp = { nodes: [ ...this.state.data.nodes ],
			edges: this.state.data.edges };
		this.changeGraphinData( tmp );
	}

	//保存模型数据  execute 控制是否立即执行
	saveModelData = async ( data, execute?:boolean )  => {
		this.setState( { saving: true },() => {return;} );
		const info = await createModel( { data } );
		if( info.data.success ) {
			// 调用启动接口，
			const rInfo = await rJob( { data: this.state.etlData.code } );
			// const rInfo  = { data: { success: false } };
			if ( rInfo.data.success ) {
				message.success( '保存、启动成功！' );
				// 立即执行
				if ( execute ) {
					//调用执行接口
					triggerModel( { data: this.state.etlData.code } ).then( res => {
						if ( res.data.success ) {
							message.success( '执行成功！' );
						} else {
							message.error( '执行失败！' );
						}
					} ).catch( err => {} );
				}

				this.setState( { showLeave: false },() => {
					this.props.history.push( { pathname: '/dataManage/dataDispatch', state: { id: this.state.etlData.parentCode } } );
					this.handleModelVisible( 'saveModalVisible', false );
				} );

				return;
			} else {
				message.success( '保存成功，启动失败，请重试！' );
			}

			// message.success( '保存成功！' );
			// this.setState( { showLeave: false },() => {
			// 	this.props.history.push( { pathname: '/dataManage/dataDispatch', state: { id: this.state.etlData.parentCode } } );
			// 	this.handleModelVisible( 'saveModalVisible', false );
			// } );
		}else {
			message.error( '保存失败，请重试！' );
		}
		this.setState( { saving: false },() => {return;} );
	}

	//更新图数据
	handleUpdateGraphinContent = async () => {
		let data = {
			id: undefined,
			content: undefined
		};
		data.id =  this.state.etlData.id;
		data.content = JSON.stringify( this.state.data );
		const info = await updateContent( { 'data': data } );
		if( info.data.success  ) {
			this.setState( { showLeave: true } );
		}
	}

	//执行操作
	handleSaveModel = () => {
		let value = JSON.parse( JSON.stringify( this.state.etlData ) );
		let data = {
			'comments': value.comments,
			'cronExpression': value.cronExpression,
			'id': value.id,
			'name': value.name,
			'content': JSON.stringify( this.state.data )
		};
		this.saveModelData( data );
	}

	//固定/取消固定
	togglePin = ( val ) => {
		this.setState( {
			pin: val
		} );
	}

	//编辑node
	editNode = ( data ) => {
		switch ( data.nodeType ) {
			case 'database':
				this.setState( {
					visible: true,
					modalTitle:	'编辑数据',
					curNodeData: data,
				}, () => {
					this.formRef.current.setFieldsValue( data );
				} );
				break;
			case 'ReplaceFields':
				this.setState( { fieldReplaceVisible: true } );
				break;
			case 'fieldEmpty':
				this.setState( { fieldEmptyVisible: true } );
				break;
			case 'RenameFields':
				this.setState( { fieldRenameVisible: true } );
				break;
			case 'GroupField':
				this.setState( { fieldGroupVisible: true } );
				break;
			case 'fieldCombine':
				this.setState( { fieldCombinVisible: true } );
				break;
			case 'ClearEmpty':
				this.setState( { fieldClearVisible: true } );
				break;
			case 'CaseConversion':
				this.setState( { fieldCaseVisible: true } );
				break;
			case 'output':
				this.setState( { dataOutVisible: true } );
				break;
			case 'fieldsplit':
				this.setState( { fieldSpiltVisible: true } );
				break;
			case 'fieldRemove':
				this.setState( { fieldRemoveVisible: true } );
				break;
			case 'aggregte':
				this.setState( { aggVisible: true } );
				break;
			case 'relate':
				this.setState( { relationVisible: true } );
				break;
			case 'ComputedField':
				this.setState( { fieldComputedVisible: true } );
				break;

		}
	}

	//数据源组件同步状态
	getRealTimeStatus = async ( node ) => {
		const param = {
			data: node.data.code,
			lang: 'cn',
			source: 'PC',
		};
		const res = await realTimeView( param );
		if ( res.data.success ) {
			let needSave = false;
			const result = res.data.data;
			const nodes = this.state.data.nodes.map( item => {
				if ( item.id === node.id ) {
					let needDelNode = false;
					item.label = `${item.data.name} (${result.planStageDesc})`;
					if ( result.planStage === 'EXECUTING' ) { //执行中
						item.label = `${item.data.name} (数据同步中:${parseInt( result.progressRate )}%)`;
					} else if ( result.planStage === 'EXECUTED' ) { //执行结束
						needDelNode = true;
						if ( result.planResult === '1' ) { //执行成功
							item.label = item.data.name;
							item.style.primaryColor = 'rgba( 103, 194, 58, 1 )';
							item.data.effect = result.effect;
							needSave = true;
						} else if ( result.planResult === '0' || result.planResult === '2' ) { //执行失败/中断
							item.label = `${item.data.name} (${result.planStageDesc})`;
						}
					}
					if ( needDelNode ) {
						this.setState( {
							syncNodes: this.state.syncNodes.filter( o => o.id !== item.id ),
						}, () => {
							this.setSyncFun();
						} );
					}
					this.setState( {
						updateNodes: [ ...this.state.updateNodes, item ]
					} );
				}
				return item;
			} );
			this.changeGraphinData( {
				nodes,
				edges: this.state.data.edges,
			}, !needSave );
		}
	}

	//同步函数
	setSyncFun = () => {

		if ( this.syncTimer ) {
			window.clearInterval( this.syncTimer );
		}
		if ( !this.state.syncNodes.length || this.state.modelStatus !== 'STOPPED' ) return;
		// 立即执行一次同步
		/* this.state.syncNodes.map( node => {
			this.getRealTimeStatus( node );
			return node;
		} ); */
		// 定时执行同步状态
		this.syncTimer = window.setInterval( () => {
			this.state.syncNodes.map( node => {
				this.getRealTimeStatus( node );
				return node;
			} );
		}, 5000 );
	}

	//清除待更新节点数组
	clearUpdateNodes = () => {
		this.setState( {
			updateNodes: []
		} );
	}

	async componentDidMount(): Promise<void> {
		const rData =  this.props.location.state;
		if( rData ) {
			this.setState( { addETL: true } );
			// @ts-ignore
			const info = await getModelInfo( { data: rData.id } );
			if ( info.data.success ) {
				const result = info.data.data;
				if( result.content ) {
					let nodeData = JSON.parse( result.content );
					this.setState( { data: nodeData,
						opt: false,modelStatus: result.status } );
					let syncNodes = [];
					nodeData.nodes.map( node => {
						if ( node.data.type === 'database' && node.data.nodeType === 'database' ) {
							if ( node.data.effect === 'DISABLE' ) {
								syncNodes.push( node );
								node.style.primaryColor = '#eee';
							} else {
								node.style.primaryColor = 'rgba( 103, 194, 58, 1 )';
							}
						}
						return node;
					} );
					this.setState( {
						data: nodeData,
						opt: false,
						syncNodes,
					}, () => {
						this.setSyncFun();
					} );
				}
				delete result.content;
				this.setState( { etlData: result } );
			}
		}else {
			this.setState( { sourceModalVisible: true } );
		}
	}

	componentWillUnmount() {
		if ( this.syncTimer ) {
			window.clearInterval( this.syncTimer );
		}
	}

	render() {
		const btnAuth = this.props.btnAuth;
		return (
			<div className={ styles.page } id={'graphin'}>
				<Prompt
					when={this.state.showLeave}
					message={location =>
						'页面修改已保存'
					}
				/>
				<div className={styles.head}>
					<div className={styles.headItem}>
						{
							this.state.tools.relationTools ? (
								<>
									<Button type="primary" shape="circle" icon={<PartitionOutlined />} onClick={() => this.setState( { relationVisible: true } )}/>
									<Button type="primary" shape="circle" icon={<CloudDownloadOutlined />} />
									<Button type="primary" shape="circle" icon={<ApartmentOutlined />}/>
							 </> )
								:null
						}
						{
							this.state.tools.outTools ? (
								<>
									<Button type="primary" shape="circle" onClick={() => { this.handleModelVisible( 'dataOutVisible',true );}}> sql输出</Button>
								</> )
								:null
						}
						{
							this.state.addETL ? (
								<>
									{
										toolsData.map( item => (
											<Tooltip key={item.visible} color="#86bc25" placement="bottom" overlayStyle={ { maxWidth: '450px' } }
													 title={<React.Fragment>
																 <div style={{ fontWeight: 'bolder' }}>{item.title}</div>
																 <div >{item.desc}</div>
															 </React.Fragment>}
													 arrowPointAtCenter>
												<BdhButton type="text" label={item.showName} icon={item.icon}
														   className={`${this.state.hoverActive === item.id ? 'primary-color' : ''}`}
														   onMouseEnter={() => this.setState( { hoverActive: item.id } )}
														   onClick={() => { this.handleModelVisible( item.visible, true ); }} />
											</Tooltip>
										) )
									}
								</>

							)
								:null
						}
						{
							this.state.tools.aggregationTools ?(
								<>
									<Button type='primary' shape='circle' onClick={() => {}} >聚合</Button>
								</>
							):null
						}
					</div>

					<div className={styles.headItem}>
						{
							btnAuth.includes( 'bi_dataArrange_addData' ) && (
								<Button type='primary' style={{ marginRight: '10px' }}
									disabled={this.state.modelStatus !== 'STOPPED'}
									icon={<PlusCircleOutlined />}
									onClick={() => {this.showModal( '添加数据' );}}>
									添加数据
								</Button>
							)
						}
						|
						{
							btnAuth.includes( 'bi_dataArrange_save' ) && (
								<Button type='primary' disabled={this.state.modelStatus !== 'STOPPED'} icon={<SaveOutlined />}
									onClick={() => this.handleModelVisible( 'saveModalVisible', true )}>
									保存
								</Button>
							)
						}
					</div>
				</div>
				<Divider style={{ margin: '10px' }}/>
				{
					this.state.addETL? ( <>
						{/*数据处理*/}
						{/*<Row className={styles.wrap}>*/}
						<GraphinComponent changeGraphinData={this.changeGraphinData}
										  modelStatus={this.state.modelStatus}
										  delNodeFun={this.delNode}
										  drowData={this.showDrawer}
										  updatePosition={this.updatePosition}
										  handleTools={this.handleToolsState}
										  setOutDataFunc={this.setOutData}
										  delNode={this.delNodeAll}
										  editNode={this.editNode}
										  Vis={this.handleModelVisible}
										  updateNodes={this.state.updateNodes}
										  clearUpdateNodes={this.clearUpdateNodes}
										  graphRef={this.graphRef}
										  nodeData={this.state.data}/>

						{/*</Row>*/}
						{/*<Divider style={{ margin: '10px' }}/>*/}

						{/*底部数据预览*/}
						<DataPreview modalVisible={this.handleModelVisible}
							   data={this.state.previewData}
							   togglePin={this.togglePin}
							   pin={this.state.pin}
							   modalVisibleValue={this.state.dataVisible}>
						</DataPreview>

						{/*/!*数据下载弹框*!/*/}
						{/*<DownLoadModal downLoadPropsModal={this.downLoadModal}*/}
						{/*				   downloadPropsVisible={this.state.downloadVisible}>*/}
						{/*</DownLoadModal>*/}

						{/*添加数据 保存数据弹框*/}
						<AddDataModal modalTitle={this.state.modalTitle}
									  maxCount={
									  	this.state.data.nodes.filter( item => item.data.nodeType === 'database' )
										  .map( item => item.data.componentName )
									  }
									  forwardRef={this.formRef}
									  etlId={this.state.etlData.id}
									  addNodeFunc={this.addNode}
									  handleOk={this.handleModelVisible}
									  data={this.state.curNodeData}
									  visible={this.state.visible}>
						</AddDataModal>

						{/*关联操作弹框*/}
						<AssociationModal
							key={this.state.outComponentData.id}
							modalVisible={this.handleModelVisible}
							moId={this.state.etlData.id}
							currentData={this.state.outComponentData}
							addRelation={this.addNodeRelation}
							relationData={this.state.data.nodes}
							addNodeFunc={this.addNode}
							addDataFunc={this.addNodeData }
							setOutDataFunc={this.setOutData}
							modalVisibleValue={this.state.relationVisible}>
						</AssociationModal>

						{/*	数据导出*/}
						<DataOutModal modalVisible={this.handleModelVisible}
									  addNodeFunc={this.addNode}
									  setOutDataFunc={this.setOutData}
									  joinComponentFunc={this.joinComponent}
									  addRelation={this.addNodeRelation}
									  outData={this.state.outComponentData}
									  modalVisibleValue={this.state.dataOutVisible}>
						</DataOutModal>

						{/*保存模板*/}
						<SaveModelModal modalVisibleValue={this.state.saveModalVisible}
							eltData={this.state.etlData}
							modelNodeData={this.state.data}
							saveModel={this.saveModelData}
							handleRouterTo={this.handleRouterTo}
							modalVisible={this.handleModelVisible}
							saving={this.state.saving}>
						</SaveModelModal>

						{/*	字段拆分*/}
						<FeildSplit FieldData={this.state.outComponentData}
							addNodeFunc={this.addNode}
							addRelation={this.addNodeRelation}
							setOutDataFunc={this.setOutData}
							modalVisible={this.handleModelVisible}
							joinComponentFunc={this.joinComponent}
							modalVisibleValue={this.state.fieldSpiltVisible}>
						</FeildSplit>

						{/*	字段聚合*/}
						<Aggregation modalVisible={this.handleModelVisible}
									 addNodeFunc={this.addNode}
									 joinComponentFunc={this.joinComponent}
									 setOutDataFunc={this.setOutData}
									 addRelation={this.addNodeRelation}
									 aggData={this.state.outComponentData}
									 modalVisibleValue={this.state.aggVisible}>
						</Aggregation>

						{/*	字段移除*/}
						<FeildRemove modalVisible={this.handleModelVisible}
									 setOutDataFunc={this.setOutData}
										 componentData={this.state.outComponentData}
										 joinComponentFunc={this.joinComponent}
										 modalVisibleValue={this.state.fieldRemoveVisible}>
						</FeildRemove>

						{/*字段排空*/}
						<EmptyField modalVisibleValue={this.state.fieldEmptyVisible}
							joinComponentFunc={this.joinComponent}
							FieldData={this.state.outComponentData}
							setOutDataFunc={this.setOutData}
							modalVisible={this.handleModelVisible}>
						</EmptyField>

						{/*组合字段*/}
						<CombinedFields FieldData={this.state.outComponentData}
							setOutDataFunc={this.setOutData}
							modalVisible={this.handleModelVisible}
							joinComponentFunc={this.joinComponent}
							modalVisibleValue={this.state.fieldCombinVisible}>
						</CombinedFields>

						{/*	字段重命名*/}
						<RenameFields modalVisibleValue={this.state.fieldRenameVisible}
									  setOutDataFunc={this.setOutData}
									  FieldData={this.state.outComponentData}
									  joinComponentFunc={this.joinComponent}
									  modalVisible={this.handleModelVisible}>

						</RenameFields>

						{/*字段分组*/}
						<GroupField
							modalVisibleValue={this.state.fieldGroupVisible}
							FieldData={this.state.outComponentData}
							joinComponentFunc={this.joinComponent}
							setOutDataFunc={this.setOutData}
							modalVisible={this.handleModelVisible}>
						</GroupField>

						{/*	字段大小写转换*/}
						<CaseConversion modalVisibleValue={this.state.fieldCaseVisible}
							FieldData={this.state.outComponentData}
							setOutDataFunc={this.setOutData}
							joinComponentFunc={this.joinComponent}
							modalVisible={this.handleModelVisible}>
						</CaseConversion>

						{/*前后空格清除	*/}
						<ClearEmpty FieldData={this.state.outComponentData}
							modalVisible={this.handleModelVisible}
							joinComponentFunc={this.joinComponent}
							setOutDataFunc={this.setOutData}
							modalVisibleValue={this.state.fieldClearVisible}>
						</ClearEmpty>

						{/*字段内容替换*/}
						<ReplaceFields modalVisibleValue={this.state.fieldReplaceVisible}
									   FieldData={this.state.outComponentData}
									   modalVisible={this.handleModelVisible}
									   setOutDataFunc={this.setOutData}
									   joinComponentFunc={this.joinComponent}>
						</ReplaceFields>

						{/* 计算 */}
						<ComputedField modalVisibleValue={this.state.fieldComputedVisible}
									   FieldData={this.state.outComponentData}
									   modalVisible={this.handleModelVisible}
									   setOutDataFunc={this.setOutData}
									   joinComponentFunc={this.joinComponent}>

						</ComputedField>

						{/*组件重命名*/}
						<RenameComponent modalVisibleValue={this.state.renameComponentVisible}
										 outData={this.state.outComponentData}
										 updateComponentInfo={this.updateComponentInfo}
										 modalVisible={this.handleModelVisible}>

						</RenameComponent>

					</> )
						:null
				}

				{/*添加etl流*/}
				<AddSourceModal modalVisible={this.handleModelVisible}
					setEtlDatafunc={this.setEtlData}
					addetlState={this.handleModelVisible}
					modalVisibleValue={this.state.sourceModalVisible}>
				</AddSourceModal>
				
			</div>
		);
	}
}

//	映射state到当前组件
const mapStateToProps = ( state ) => {
	return {
		btnAuth: state.btnAuth,
	};
};

export default connect( mapStateToProps )( DataArrage );
